<template>
  <div>
    <div id="app" class="sk-upload">
      <div class="preview-file"  v-for="(item,index) in imgList" :key="item.url">
        <!-- 删除照片按钮 -->
        <div class="delete-icon" @click="deleteImg(index)" v-if="deleteShow">
          <a-icon type="close-circle"  theme="filled" style="font-size: 20px;color:#ff4d4f;"/>
        </div>
        <!-- 回显选择的学生 -->
        <div v-show="item.studentName" class="student-name" :class="[item.show?'student-list':'']" @mouseenter="item.show = true"  @mouseleave="item.show = false">
          <span>{{ item.studentName }}</span>
        </div>
        <!-- 给照片选择学生 -->
        <div class="img-box">
          <div class="selete-student">
            <div class="selete-student-box" @click="selectStudent(index)">
              <a-icon type="user" style="font-size: 28px;color:#13C2C2"/>
              <span>选择学生</span>
            </div>
          </div>
          <div style="display:none">{{ item.url }}</div>
          <img  :src="item.url | previewImg" v-if="handleSuffix(item.url)" class="img"/>
          <video :src="item.url | previewImg" v-if="!handleSuffix(item.url)"  class="img"></video>
        </div>
      </div>
      <!-- 选择文件 -->
      <div class="upload-file" v-if="deleteShow && maxImgLength">
        <label :for="uploadId" class="select-label">
          <div class="select-label-text">
            <a-icon type="plus" />
            <div >{{uploadFileText?"正在上传":"上传照片"}}</div>
          </div>
        </label>
        <input type="file" @change="uploadFile" :id="uploadId" ref="referenceUpload" :accept="accept" title="" :name="uploadId" value=""  class="select-file" :multiple="fileMultiple"/>
      </div>
      <!-- 选择幼儿弹窗 -->
      <a-modal :visible="previewVisible" title="选择幼儿" :maskClosable="false" @cancel="handleCancel()" @ok="handleOk" >
        <a-select v-model="studentId" placeholder="请选择幼儿姓名" style="width: 100%;" :mode="stuMultiple?'multiple':''">
          <a-select-option v-for="item in studentList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
        </a-select> 
      </a-modal>
    </div>
    <p v-if="errorStatus" :class="errorStatus?'error-active':''">请选择照片！</p>
  </div>
</template>
<script>
import { getAction, postAction,getFileAccessHttpUrl } from '@/api/manage'
export default {
  name: 'skUpload',
  data() {
    return {
      imgList:[],
      previewVisible:false,
      studentList:[],
      studentId:undefined,
      studentIndex:0,
      nameShow:false,
      deleteShow:true,
      errorStatus:false,
      uploadFileText:false
    }
  },
  props:{
    stuMultiple:{
      type:Boolean,
      default:false
    },
    fileMultiple:{
      type:Boolean,
      default:false
    },
    // 同一个页面多次调用，传入不同的id防止互相干扰
    uploadId:{
      type:String,
      default:"thumb"
    },
    accept:{
      type:String,
      required:false,
      default:""
    },
    maxNumber:Number,
    evaluationData:Object,
    evaluationDataInfo:Object,
    selectDimensionalityStatus:Boolean
  },
  watch:{
    "evaluationData.studentId":{
      handler(val){
        if (val) {
          this.studentList = [];
          val.forEach(el => {
            let studentItem = this.evaluationData.studentList.find(item => el == item.id)
            // studentItem.photo = ''
            this.studentList.push(studentItem)
          })
        }
      },
    },
    evaluationDataInfo:{
      handler(val){
        this.deleteShow = false;
        val.photo.split(",").forEach(item => {
          this.imgList.push({
            url:item
          })
        });
      }
    }
  },
  components: {},

  filters: {
    previewImg(url){
      return getFileAccessHttpUrl(url)
    }
  },

  computed: {
    maxImgLength(){
      if (this.maxNumber) {
        if (this.imgList.length >= this.maxNumber && this.imgList.length != 0)  return false
      }
      return true
    }
  },

  created() {
    
  },

  activated() {},

  mounted() {},

  methods: {
    handleSuffix(url){
      let urlArr = url.split(".");
      let suffix = urlArr[urlArr.length - 1];
      if (suffix == "mp4") {
        return false;
      }else{
        return true;
      }
    },
    uploadFile(e){
      let list = e.target.files
      const url = "/sys/common/upload"
      this.uploadFileText = true;
      let num = 0,listLength = list.length
      console.log(this.deleteShow);
      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        let formData = new FormData();
        formData.append("file",item)
        formData.append("biz","temp")
        postAction(url,formData).then((res)=>{
          if(res.success){
            num ++;
            this.imgList.push({
              url:res.message,
              id:"",
              studentName:"",
              show:false,
            })
            this.errorStatus = false;
            this.$emit("errorStatus")
            if (num == listLength) {
              this.uploadFileText = false;
              if (this.imgList.length >= this.maxNumber) {
                this.imgList = this.imgList.splice(0,this.maxNumber);
              }
            }
            this.$refs.referenceUpload.value = "";
            this.$forceUpdate();
          } else {
            this.$message.warning(res.message);
          }
        }).catch((error)=>{
          console.error(error);
        })
      }
    },
    selectStudent(i){
      console.log('sss');
      this.studentId = undefined
      this.studentIndex = i;
      if (this.imgList[i].id) {
        this.studentId = this.imgList[i].id.split(",")
      }
      this.previewVisible = true;
    },
    deleteImg(i){
      this.imgList.splice(i,1)
    },
    handleOk(){
      let id,name,classId;
      if (this.stuMultiple) {
        let ids = [],names = [],classIds = [];
        this.studentId.forEach(el => {
          let dataItem = this.studentList.find(item=>item.id == el);
          ids.push(dataItem.id);
          classIds.push(dataItem.classId)
          names.push(dataItem.name);
        });
        id = ids.join(",")
        classId = Array.from(new Set(classIds)).join(",")
        name = names.join(",")
      }else{
        let data = this.studentList.find(item=>item.id == this.studentId)
        id = data.id;
        classId = data.classId;
        name = data.name;
      }
      this.imgList[this.studentIndex].id = id;
      this.imgList[this.studentIndex].classId = classId;
      this.imgList[this.studentIndex].studentName = name;
      this.handleCancel();
      this.$emit("errorStatus")
    },
    handleCancel() {
      this.previewVisible = false;
    },
    onSubmit(){
      this.errorStatus = false;
      if (this.imgList.length > 0) {
        this.$emit("photoData",this.imgList)
      }else{
        if (this.selectDimensionalityStatus) {
          this.errorStatus = true;
        }
      }
    },
    clearImgList(){
      this.imgList = []
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.error-active{
  color: #f5222d;
}
@wh:104px;
@color:#13C2C2;
.sk-upload{
  display: flex;
  flex-wrap: wrap;
}
.preview-file{
  margin-right: 16px;
  margin-bottom: 16px;
  position: relative;
  height: @wh;
  .img{
    width: @wh;
    height: @wh;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
  }
  .img-box:hover .selete-student{
    display: block;
  }
  .selete-student{
    display: none;
    z-index: 99;
    position: absolute;
    top:0;
    width:@wh;
    height: @wh;
    line-height: @wh;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-align: center;
    .selete-student-box{
      display: flex;
      flex-direction: column;
      margin-top:15px;
      line-height: @wh;
      height: @wh;
      &>span{
        line-height: 1.5;
        color: @color;
      }
    }
  }
  .delete-icon{
    position: absolute;
    top:-8px;
    right: -8px;
    line-height: 0;
    background: #fff;
    width: 20px;
    height: 20px;
    z-index: 1000;
    border-radius: 50%;
    cursor: pointer;
  }
  .student-name{
    z-index: 999;
    position: absolute;
    bottom: 0;
    width:@wh;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 0 0 4px 4px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    & > span{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      width: 100%;
      line-height: 27px;
    }
  }
  .student-list{
    z-index: 999;
    height:@wh !important;
    overflow-y: auto !important;
    border-radius: 4px;
    & > span{
      white-space:normal;
    }
  }
}
.upload-file{
  position: relative;
  .select-label{
    display: block;
    width: @wh;
    height: @wh;
    line-height: @wh;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    vertical-align: top;
    background-color: #fafafa;
    border: 1px dashed #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.3s ease;
    &:hover{
      border-color:@color
    }
    &>.select-label-text{
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      div{
        line-height: 1.5;
      }
    }
  }
  .select-file{
    position: absolute;
    top: 0;
    opacity: 0;
    width:@wh;
    height: @wh;
  }
}
</style>
